<template>
	<a-card :bordered="false">
		<a-form ref="searchFormRef" name="advanced_search" :model="searchFormState">
			<a-row :gutter="24">
				<a-col :span="4">
					<a-form-item label="命中关键词" name="keyword">
						<a-input
							v-model:value="searchFormState.keyword"
							placeholder="请输入命中关键词"
							enter-button
							allowClear
						/>
					</a-form-item>
				</a-col>
				<a-col :span="5">
					<a-form-item label="通话序列号" name="callId">
						<a-input v-model:value="searchFormState.callId" placeholder="请输入通话序列号" enter-button
								 allowClear/>
					</a-form-item>
				</a-col>
				<a-col :span="5">
					<a-form-item label="被叫号码" name="callee">
						<a-input v-model:value="searchFormState.callee" placeholder="请输入被叫号码" enter-button
								 allowClear/>
					</a-form-item>
				</a-col>
				<a-col :span="5">
					<a-form-item label="坐席账号" name="agentNum">
						<a-input v-model:value="searchFormState.agentNum" placeholder="请输入坐席账号" enter-button
								 allowClear/>
					</a-form-item>
				</a-col>
				<a-col :span="5">
					<a-form-item label="所属部门" name="deptId">
						<DeptSelect v-model:value="searchFormState.deptId"/>
					</a-form-item>
				</a-col>
			</a-row>
			<a-row :gutter="24">
				<a-col :span="4">
					<a-form-item label="AI审核结果" name="aiReviewStatus">
						<a-select
							v-model:value="searchFormState.aiReviewStatus"
							placeholder="请选择AI审核结果"
							mode="multiple"
							:options="voiceCheckStatus"
							allowClear
						/>
					</a-form-item>
				</a-col>
				<a-col :span="5">
					<a-form-item label="分公司审核结果" name="branchReviewStatus">
						<a-select
							v-model:value="searchFormState.branchReviewStatus"
							:options="voiceCheckStatus"
							mode="multiple"
							placeholder="请选择分公司质检审核结果"
							allowClear
						></a-select>
					</a-form-item>
				</a-col>
				<a-col :span="5">
					<a-form-item label="总部审核结果" name="hqReviewStatus">
						<a-select
							v-model:value="searchFormState.hqReviewStatus"
							mode="multiple"
							placeholder="请选择总部质检审核结果"
							:options="voiceCheckStatus"
							allowClear
						/>
					</a-form-item>
				</a-col>
				<a-col :span="5">
					<a-form-item label="终审审核结果" name="finalReviewStatus">
						<a-select
							v-model:value="searchFormState.finalReviewStatus"
							mode="multiple"
							placeholder="请选择终审结果"
							:options="voiceCheckStatus"
							allowClear
						/>
					</a-form-item>
				</a-col>
				<a-col :span="5">
					<a-form-item label="回传时间">
						<a-range-picker
							v-model:value="createTimeArr"
							@change="dateChange"
							:default-value="[dayjs('2024-11-11', 'YYYY-MM-DD'), dayjs('2024-11-15', 'YYYY-MM-DD')]"
						/>
					</a-form-item>
				</a-col>
			</a-row>
			<a-row :gutter="24">
				<a-col :span="4">
					<a-form-item label="通话时长" name="callDuration">
						<a-input
							v-model:value="searchFormState.callDuration"
							placeholder="请输入命中关键词"
							enter-button
							allowClear
						/>
					</a-form-item>
				</a-col>
			</a-row>
			<a-space>
				<a-button type="primary" @click="tableRef.refresh(true)">查询</a-button>
				<a-button class="ml-3" @click="reset">重置</a-button>
			</a-space>
		</a-form>
	</a-card>
	<a-card :bordered="false" class="mt-2">
		<s-table
			ref="tableRef"
			:columns="columns"
			:data="loadData"
			bordered
			:scroll="{ x: 'max-content' }"
		>
			<template #operator>
				<a-space>
					<a-button type="primary" @click="uploadRef.openUpload()">
						<template #icon>
							<import-outlined/>
						</template>
						导出
					</a-button>
				</a-space>
			</template>
			<template #bodyCell="{ column, record, text }">
				<template v-if="column.dataIndex === 'action'">
					<a-button type="link" size="small" @click="detailRef.onOpen(record)">详情</a-button>
				</template>
			</template>
		</s-table>
	</a-card>
	<Detail ref="detailRef" @successful="tableRef.refresh(true)"/>
</template>
<script setup name="check">
import bizUserApi from '@/api/biz/bizUserApi'
import dayjs from 'dayjs'
import checkApi from "@/api/qc/check/checkApi";
import DeptSelect from "@/components/Tjzy/Dept/index.vue";
import tool from "@/utils/tool";
import Detail from "@/views/qc/check/detail.vue";
import {ref} from "vue";

const searchFormRef = ref()
const searchFormState = ref({
	current: 1,
	size: 10,
	beginTime: dayjs().startOf('day').format('YYYY-MM-DD HH:mm:ss'),
	endTime: dayjs().endOf('day').format('YYYY-MM-DD HH:mm:ss')
})
const tableRef = ref()
const treeData = ref([])
const treeDefaultExpandedKeys = ref([])
const voiceCheckStatus = tool.dictList('voiceCheckStatus')
const createTimeArr = ref([dayjs().startOf('day'), dayjs().endOf('day')])
const detailRef = ref()
const columns = [
	{
		title: '呼叫序列号',
		dataIndex: 'callId'
	},
	{
		title: '命中关键词',
		dataIndex: 'keyword'
	},
	{
		title: '被叫',
		dataIndex: 'callee'
	},
	{
		title: '通话时长',
		dataIndex: 'callDuration'
	},
	{
		title: '坐席账号',
		dataIndex: 'agentNum'
	},
	{
		title: '坐席姓名',
		dataIndex: 'userName'
	},
	{
		title: '所属公司',
		dataIndex: 'deptName'
	},
	{
		title: 'AI审核',
		dataIndex: 'aiReviewStatusName'
	},
	{
		title: '分公司审核',
		dataIndex: 'branchReviewStatusName'
	},
	{
		title: '总部审核',
		dataIndex: 'hqReviewStatusName'
	},
	{
		title: '终审',
		dataIndex: 'finalReviewStatusName'
	},
	{
		title: '操作',
		dataIndex: 'action',
		align: 'center',
		scopedSlots: {customRender: 'action'}
	}
]

const dateChange = (value) => {
	searchFormState.value.beginTime = value[0].format('YYYY-MM-DD').concat(' 00:00:00')
	searchFormState.value.endTime = value[1].format('YYYY-MM-DD').concat(' 23:59:59')
}

const reset = () => {
	searchFormRef.value.resetFields()
	searchFormState.value.beginTime = dayjs().startOf('day').format('YYYY-MM-DD HH:mm:ss')
	searchFormState.value.endTime = dayjs().endOf('day').format('YYYY-MM-DD HH:mm:ss')
	tableRef.value.refresh(true)
}

const loadData = (parameter) => {
	searchFormState.value.current = parameter.current
	searchFormState.value.size = parameter.size
	return checkApi.pageList(searchFormState.value).then(res => {
		return res;
	})
}

onMounted(() => {
	bizUserApi.userOrgTreeSelector().then((res) => {
		if (res !== null) {
			treeData.value = res
			// 默认展开2级
			treeData.value.forEach((item) => {
				// 因为0的顶级
				if (item.parentId === '0') {
					treeDefaultExpandedKeys.value.push(item.id)
					// 取到下级ID
					if (item.children) {
						item.children.forEach((items) => {
							treeDefaultExpandedKeys.value.push(items.id)
						})
					}
				}
			})
		}
	})
})
</script>
